<template>
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header"><i class="fa fa-lastfm"></i>  菜单授权</div>
        <div class="layui-form-item" style="margin:5px 10px 5px 10px;">
        <div class="layui-input-inline selectAddress">                               
        <select v-model="authorityId" @change="modAuthority(authorityId)" style="display:inline-block;" class="form-control">
            <option v-for="authority in authoritys" v-bind:value="authority.roleId">
                {{ authority.roleName }}
            </option>
        </select>
        </div>
        </div>

        <div class="layui-col-md6">
            <div class="layui-card" style="height:357px;">
                <div class="layui-card-header" style="color:#67C23A;">
                    已授权菜单
                    <button class="layui-btn" style="float:right;background:#F56C6C;" v-on:click="removeAutority()"><i class="fa fa-angle-double-right"></i></button>    
                </div>
                <div class="layui-card-body">
                    <ul>
                        <li class="my_li" v-for="(item,index) in haveAuthoritys"><input type="checkbox" v-on:click="leftCheckItem(item.menuId)" v-bind:value="item.menuId"  title="" class="checkBoxClass"><span class="my_span">{{item.menuName}}</span> </li>
                    </ul> 
                </div>
            </div>
            </div>
            <div class="layui-col-md6" >
            <div class="layui-card" style="height:357px;">
                <div class="layui-card-header" style="color:#F56C6C;">
                    未授权菜单
                    <button class="layui-btn" style="float:right;background:#67C23A;" v-on:click="getAutority()"><i class="fa fa-angle-double-left"></i></button>    
                </div>
                <div class="layui-card-body">
                    <ul> 
                        <li class="my_li" v-for="(item,index) in noHaveAuthoritys"><input type="checkbox" v-on:click="rightCheckItem(item.menuId)" v-bind:value="item.menuId"  title="" class="checkBoxClass"><span class="my_span">{{item.menuName}}</span> </li>
                    </ul>
                </div>
            </div>
        </div>
      </div>
    </div>
</template>
<script>
import Qs from 'qs'
export default {
    inject:['reload'],
    data () {
        return {
            authorityId:"0",
            authoritys:[
                {roleId:0,roleName:"角色权限"}
            ],
            haveAuthoritys:[//已授权权限

            ],
            noHaveAuthoritys:[//未授权菜单

            ],
            checkAuthoritysCheckBox:[//已授权的复选框

            ],
            checkUnAuthoritysCheckBox:[//未授权的复选框

            ]
        }
    },
    mounted: function (){//页面加载向后台发送数据还有create也是页面一加载就可以进行发送请求的
      this.getRoleList(); 
    },
    methods: {
        exit: function(){
             this.$axios
            .get('/bk-employee/exitout',
                  {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
            )
            .then(result => {
               alert("权限更改，重新签到");
               this.$router.push({path: '/'})
            })
            .catch(failResponse => {})
        },
        getRoleList: function () {
            this.$axios
            .get('/bk-role/getAllRoleList',
                {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
            )
            .then(result => {
            for(var i=0;i<result.data.data.length;i++){
                this.authoritys.push(
                    result.data.data[i]
                );
            }
            })
            .catch(failResponse => {})
        },
        modAuthority: function(roleId){//更改角色，显示对应的已授权权限和未授权权限
            $('ul').empty();//清空所有的菜单权限
            if(roleId!=0){
                this.getHaveRoleMenuList(roleId);//获取当前已授权权限
                this.getAllRoleUnMenuList(roleId);//获取所有当前未授权权限
            }
        },
        getHaveRoleMenuList:function(roleId){//获取已授权菜单
            this.$axios
            .post('/bk-menu/getHaveRoleMenuList/'+roleId,
                  {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
            )
            .then(result => {
                for(var i=0;i<result.data.data.length;i++){
                    this.haveAuthoritys.push(
                        result.data.data[i]
                    );
                }
            })
            .catch(failResponse => {})
        },
        getAllRoleUnMenuList:function(roleId){//获取所有的未授权菜单
            this.$axios
            .post('/bk-menu/getAllRoleUnMenuList/'+roleId,
                  {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
            )
            .then(result => {
                if(result.data.code==200){
                    for(var i=0;i<result.data.data.length;i++){
                        this.noHaveAuthoritys.push(
                            result.data.data[i]
                        );  
                    }
                }
            })
            .catch(failResponse => {})
        },
        removeAutority:function (){//移除指定菜单权限
            if(this.checkAuthoritysCheckBox.length==0){
                this.$message.error("请勾选要移除的菜单权限");
            }else{
                var menuAuths=this.checkAuthoritysCheckBox.join(',');
                var data=Qs.stringify({
                    "menuAuths":menuAuths,
                    "roleId":this.authorityId,
                })
                console.info(menuAuths);
                this.$axios
                .post('/bk-menu/removeAutority',data,
                    {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
                )
                .then(result => {
                    if(result.data.code==200){
                        this.modAuthority(this.authorityId);//重新加载菜单选项
                        this.checkAuthoritysCheckBox=[];//清空复选框数组
                        localStorage.removeItem('Authorization');
                         alert("当前柜员权限已更改,会话清除，重新登陆");
                        top.location.href="/"
                    }
                })
                .catch(failResponse => {})
            }
        },
        getAutority:function(){//授予菜单权限
            if(this.checkUnAuthoritysCheckBox.length==0){
                 this.$message.error("请勾选要添加的菜单权限");
            }else{
                var menuAuths=this.checkUnAuthoritysCheckBox.join(',');
                var data=Qs.stringify({
                    "menuAuths":menuAuths,
                    "roleId":this.authorityId,
                })
                this.$axios
                .post('/bk-menu/addmenuAutority',data,
                    {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
                )
                .then(result => {
                    if(result.data.code==200){
                        this.modAuthority(this.authorityId);//重新加载菜单选项
                        this.checkUnAuthoritysCheckBox=[];//清空复选框数组
                        localStorage.removeItem('Authorization');
                        this.$message.error("当前柜员权限已更改,会话清除，重新登陆");
                        top.location.href="/"
                    }
                })
                .catch(failResponse => {})
            }
        },
        leftCheckItem:function(menuId){//勾选复选框到数组
            var flag=this.checkAuthoritysCheckBox.indexOf(menuId);//如果存在返回值的下标，不存在返回-1
            if(flag==-1){
                this.checkAuthoritysCheckBox.push(menuId);
            }else if(flag!=-1){
                this.checkAuthoritysCheckBox.splice(flag,1);
            }
        },
        rightCheckItem:function(menuId){
            var unflag=this.checkUnAuthoritysCheckBox.indexOf(menuId);//勾选复选框到数组
            if(unflag==-1){
                this.checkUnAuthoritysCheckBox.push(menuId);
            }else if(unflag!=-1){
                this.checkUnAuthoritysCheckBox.splice(unflag,1);
            }
        }
    }
}
</script>
<style>
.checkBoxClass{
    display: inline-block;
    width: 20px;
    height: 20px;
}
.my_li{
    font-size: 18px;
    font-family: 宋体;
}
.my_span{
    position: relative;
    top: -4px;
    margin-left: 10px;
}
</style>
